<template>
    <div class="const flex_column_between" v-loading="loading">
        <div class="schedule_tit flex_center_between">
            <div class="flex_center">
                <span class="label font24">21天抗遗忘</span>  
            </div>
            <div class="flex_center">
                <div class="etext themeFont cur font18" style="margin-right:1rem" @click="learnFn">
                    自主创建
                </div>
                <div v-if="listData.length > 0" class="etext themeFont cur font18" @click="allFn">
                    全部<i class="el-icon-arrow-right"></i>
                </div>
            </div>
        </div>

        <div class="forget_cont">
            <template v-if="listData.length > 0">
                <div class="row_cont">
                    <div v-for="(item, index) in listData" :key="index">
                        <div class="row flex"  v-if="item.id == 0">
                            <div class="flex_c_c">
                                <img style="width:2rem;height:2rem;margin-left: -.4rem;margin-top: 0px;" src="@/assets/img/time.png" alt="" srcset="">
                            </div>
                            <div class="row_right flex_center_between font20 bold">
                                {{ formatDate(item.reviewDate) }}
                            </div>
                            <div class="timeline"></div>
                        </div>
                        <div class="row flex" v-else>
                            <div class="flex_c_c">
                                <span class="up"></span>
                            </div>
                            <div class="row_right flex_center_between font20">
                                <span class="time">{{ item.startTime }}</span>
                                <span class="label text_hidden">{{ item.courseName || '' }}</span>
                                <span class="name themeFont font18">{{ item.user && item.user.name }}</span>
                                <span class="time1 font18">{{ formatDate(item.createdAt) }}</span>
                                <el-tooltip class="item" effect="dark" content="打印" placement="top"  :hide-after="500">
                                    <img class="img1 cur print" src="@/assets/img/print.png" alt="" srcset="" @click="printFn(item)">
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="去复习" placement="top"  :hide-after="500">
                                    <img class="img1 cur teach" src="@/assets/img/teach.png" alt="" srcset="" @click="teachFn(item)">
                                </el-tooltip>
                            </div>
                            <div class="timeline" v-if="listData.length!=(index+1)"></div>
                        </div>
                    </div>
                </div>    
            </template>

            <div v-if="istip"  class="flex h_full">
                <empty type="1" text="暂无抗遗忘" />
            </div>
            
            <bear_dialogVue
                ref="bearDialog"
                title="21天抗遗忘"
                :width="'50%'"
                :isUserFooter="false"
                >
                <template v-if="allList.length > 0">
                    <div class="container" ref="container" v-loading="isLoading">
                        <div ref="inner">
                            <div class="row_cont">
                            <div v-for="(item, index) in allList" :key="index">
                                <div class="row flex"  v-if="item.id==0">
                                    <div class="flex_c_c">
                                        <img style="width:2rem;height:2rem; margin-left: -4px;margin-top: 0px;" src="@/assets/img/time.png" alt="" srcset="">
                                    </div>
                                    <div class="row_right bold flex_center_between font20">
                                        {{ formatDate(item.reviewDate) }}
                                    </div>
                                    <div class="timeline"></div>
                                </div>
                                <div class="row flex" v-else>
                                    <div class="flex_c_c">
                                        <span class="up"></span>
                                    </div>
                                    <div class="row_right flex_center_between font20">
                                        <span class="time">{{ item.startTime }}</span>
                                        <span class="label text_hidden">{{ item.courseName || '' }}</span>
                                        <span class="name themeFont font18">{{ item.user && item.user.name }}</span>
                                        <span class="time1 font18">{{ formatDate(item.createdAt) }}</span>
                                        <el-tooltip class="item" effect="dark" content="打印" placement="top" :hide-after="500" >
                                            <img class="img1 cur print" src="@/assets/img/print.png" alt="" srcset="" @click="printFn(item)">
                                        </el-tooltip>
                                        <div class="tooltip">
                                            <div class="focusing">
                                                去复习
                                            </div>
                                            <span class="down_cont"></span>
                                            <img class="img1 cur teach" src="@/assets/img/teach.png" alt="" srcset="" @click.prevent="teachFn(item)">
                                        </div>
                                        
                                    </div>
                                    <div class="timeline" v-if="allList.length!=(index+1)"></div>
                                </div>
                            </div>
                        </div>
                        </div> 
                    </div>
                </template>
    
                <div v-else class="flex h_full">
                    <empty type="1" text="暂无抗遗忘" />
                </div>
            </bear_dialogVue>

            <bear_dialogVue
                ref="bearLearnDialog"
                title="上课记录"
                :width="'50%'"
                :isUserFooter="false"
                >
                <template v-if="learnList.length > 0">
                    <div class="container" ref="container" v-loading="isLoading">
                        <div ref="inner">
                            <div class="dialog_cont">
                                <div class="dialog_cont"  v-loading="loading">
                                    <div class="row_right row1 flex_center_between font20" v-for="(item, index) in learnList" :key="index">
                                        <span class="label text_hidden font20">{{ item.course ? item.course.name : '' }}</span>
                                        <span class="label1 text_hidden">{{ item.user ? item.user.name : '' }}</span>
                                        <span class="time1 font18">{{ formatDate(item.startTime) }} ~ {{ formatDate(item.endTime) }}</span>
                                        <el-tooltip class="item" effect="dark" content="去创建" placement="top"  :hide-after="500">
                                            <img class="img3 cur teach" src="@/assets/img/teach.png" alt="" srcset="" @click="jumpReview(item)">
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </template>
                <div v-else class="flex h_full">
                    <empty type="1" text="暂无记录" />
                </div>
            </bear_dialogVue>
        </div>
    </div>
</template>

<script>
import {getDateCurren} from '@/utils/base.js'
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import { reviewCycleList } from '@/api/reviewCycle.js'
import { learnList } from '@/api/learn.js'
import config from '@/config/index.js'
export default {
    components:{
        bear_dialogVue
    },
    data() {
        return {
            loading: false,
            currentDialog: 1, // 当前弹窗 1：抗遗忘  2：上课记录
            time: getDateCurren(),
            reverse: false,
            listData: [],
            isLoading:false,//节流
            containerHeight: 0,
            innerHeight:0,
            allList:[],
            totalPage: 0, // 总页数
            currentPage: 1, // 当前页
            pageSize: 15, // 每页条数
            total: 0, // 总条数
            istip:false,
            disabled: false,
            learnList: [],
            learnTotal: 0,
            learnCurrentPage: 1,
            learnTotalPage: 0,
            learnPageSize: 15,
        }
    },
    created() {
    },
    mounted() {
        this.getList()
        this.getListPage()
        this.getLearnList()
    },
    //页面销毁之前，清除scroll
    destroyed() {
        let list = document.getElementsByClassName("el-tooltip__popper");
        if (list.length > 0) {
            list[list.length - 1].style.display = "none";
            if(list.length>1){
                list[list.length - 2].style.display = "none";
            }
        }   
        if(this.$refs.container){
            this.$refs.container.removeEventListener('scroll', this.callBackScroll)
        }
    },
    methods:{
        // 滚动回调函数
        callBackScroll(e) {
            if (this.loading) return
            this.innerHeight = this.$refs.inner.offsetHeight
            let scrollTop = e.target.scrollTop
            // 当滚出去的内容高度加上窗口也就是外部容器的高度大于等于内容高度时发送请求
            if (scrollTop + this.containerHeight >= this.innerHeight) {
                if (this.currentDialog == 1) {
                    let page2 = this.total % this.pageSize
                    if(page2 >= 0 && this.currentPage != this.totalPage){
                        this.currentPage ++
                        this.getListPage();
                    }
                }else if (this.currentDialog == 2) {
                    let page2 = this.learnTotal % this.learnPageSize
                    if(page2 >= 0 && this.learnCurrentPage != this.learnTotalPage){
                        this.learnCurrentPage ++
                        this.getLearnList();
                    }
                }
            }
        },
        async getList() {
          this.loading = true
          await reviewCycleList({
                page: 1,
                pageSize: 4
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    let allList = []
                    if (res.data.list.length > 0) {
                        res.data.list.forEach((item, index) => {
                            item.list.forEach((_item, key) => {
                                if (key == 0) {
                                    allList.push({
                                        'id': 0,
                                        'reviewDate': _item.reviewDate
                                    })
                                }
                                let courseName = []
                                if (_item.course) {
                                    _item.course.forEach((course) => {
                                        courseName.push(course.name)
                                    })
                                }
                                _item.courseName = courseName.join(' ')
                                allList.push(_item)
                            })
                        })
                    }
                    this.listData = allList
                    if(allList.length==0){
                        this.istip=true
                    }
                }
            })
        },
        getListPage() {
            this.isLoading = true
            reviewCycleList({
                page: this.currentPage,
            }).then(res => {
                this.isLoading = false
                if (res.error === 0) {
                    let data = res.data.list
                    let totalPage = Math.ceil(res.data.total / res.data.perPage)
					this.totalPage = totalPage
                    this.total = res.data.total
                    this.pageSize = res.data.perPage
                    let allList = this.allList
                    if (this.page == 1) {
                        allList = []
                    }
                    data.forEach((item, index) => {
                        item.list.forEach((_item, key) => {
                            if (key == 0) {
                                allList.push({
                                    'id': 0,
                                    'reviewDate': _item.reviewDate
                                })
                            }
                            let courseName = []
                            if (_item.course) {
                                _item.course.forEach((course) => {
                                    courseName.push(course.name)
                                })
                            }
                            _item.courseName = courseName.join(' ')
                            allList.push(_item)
                        })
                    })
                    this.allList = allList
                }
            }).finally(() => {
                this.isLoading = false
            })
        },
        // 获取上课列表
        getLearnList() {
            this.isLoading = true
            learnList({
                page: this.learnCurrentPage,
                isReview: 0
            }).then(res => {
                if (res.error === 0) {
                    let totalPage = Math.ceil(res.data.total / res.data.perPage)
					this.learnTotalPage = totalPage
                    this.learnTotal = res.data.total
                    this.learnPageSize = res.data.perPage

                    let learnList = this.learnList
                    if (this.learnCurrentPage == 1) {
                        learnList = []
                    }

                    res.data.list.forEach((item, index) => {
                        learnList.push(item)
                    })
                    this.learnList = learnList
                }
            }).finally(() => {
                this.isLoading = false
            })
        },
        formatDate(time) {
            if (time) {
                let createdTime = time.split('-')
                time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
        allFn(){
            this.currentDialog = 1
            this.$refs.bearDialog.openDialog();
            // 容器高度
            this.$nextTick(()=>{
                this.containerHeight = this.$refs.container.clientHeight
                // 内容高度
                this.innerHeight = this.$refs.inner.offsetHeight
                // 滚动监听
                this.$refs.container.addEventListener('scroll',this.callBackScroll)
            })
        },
        teachFn(row){
            this.$router.push({
                path: '/review',
                query: {
                    id: row.id,
                    userId: row.user ? row.user.id : ''
                }
            })
        },
        //打印
        printFn(row) {
            let list = document.getElementsByClassName("el-tooltip__popper");
            if (list.length > 0) {
                list[list.length - 1].style.display = "none";
                if(list.length>1){
                    list[list.length - 2].style.display = "none";
                }
            } 
            let url = config.basePrintUrl + '/cycle?id=' + row.id
            window.open(url)  
        },
        // 自主创建抗遗忘
        learnFn() {
            this.getLearnList()
            this.currentDialog = 2
            this.$refs.bearLearnDialog.openDialog();
            // 容器高度
            this.$nextTick(()=>{
                this.containerHeight = this.$refs.container.clientHeight
                // 内容高度
                this.innerHeight = this.$refs.inner.offsetHeight
                // 滚动监听
                this.$refs.container.addEventListener('scroll',this.callBackScroll)
            })
        },
        jumpReview(row) {
            this.$router.push({
                path: '/review/create',
                query: {
                    learnId: row.id,
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.const{
    width: 100%;
    height: 100%;
}
.tooltip{
    position: relative;
    .focusing{
        position: absolute;
        border-radius: 4px;
        padding: 1rem 0;
        z-index: 2000;
        font-size: 1.2rem;
        line-height: 1.2rem;
        width: 7rem;
        word-wrap: break-word;
        display: none ;
        background: #303133;
        text-align: center;
        color: #FFFFFF;
        top: -4rem;
        left: -2rem;
    }
    .down_cont{
        position: absolute;
        display: none;
        width: 0;
        height: 0;
        border-color: #303133;
        border-style: solid;
        border-width: .6rem;
        left: 1rem;
        bottom: 4rem;
        transform: rotate(45deg);
        }
    &:hover .focusing{
        display: block ;
    }
    &:hover .down_cont{
        display: block ;
    }
}

::v-deep .el-timeline-item__wrapper{
    top:-9px;
}
.up{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D8D8D8;
}
.timeline{
    position: absolute;
    left: .5rem;
    height: 100%;
    top: 2.6rem;
    border-left: 2px dotted #D8D8D8;
}

.schedule_tit{
    width: 100%;
    .label{
        font-size: 2.2rem;
        margin-right:2.6rem;
    }
    .etext{
        font-size: 1.8rem;
        .el-icon-arrow-right{
            font-size: 1.6rem;
        }
    }

}   
.container{
    width: 100%;
    height: 100%;
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        &::-webkit-scrollbar-track { 
            background: #fff;
            border-radius: 5px;
        }
        
}
.forget_cont{
    width: 100%;
    height: 100%;
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        &::-webkit-scrollbar-track { 
            background: #fff;
            border-radius: 5px;
        }
        
    .row{
        width: 100%;
        color: #3A3F5E;
        font-size: 1.6rem;
        margin-bottom:2rem;
        position: relative;
        // padding: 10px 0;
        .row_right{
            margin-left: 1.7rem;
            flex: 1;
            .print:hover{
                content: url(@/assets/img/print_1.png);
            }
            .teach:hover{
                content: url(@/assets/img/teach_1.png);

            }
            .label{
                width: 20rem;
            }
        }
        .time{
            margin-right: 1.4rem;
        }
        .label{
            width: 20rem;
        }
        .name{
            margin-right: 3.5rem;
        }
        .time1{
            margin-right: 3rem;
        }
        .img1{
            width: 3.2rem;
            height: 3.2rem;
        }
    }
}
.row1{
    .label{
        width: 45%;
    }
    .label1{
        width: 15%;
    }
}

.img3 {
    width: 3.2rem;
    height: 3.2rem;
}

</style>